<template>
  <div class="app-container ">
    <!--学生首页样式-->
    
        <div v-if="this.$store.state.user.userType===2">
          <el-row>
            <el-col  :span="6">
              <div align="center">
                <el-progress  type="circle" :percentage="reportNum.week"></el-progress>
              </div>
              <br>
              <span style="text-align: center;display:block;" >周报进度</span>
            </el-col >
            <el-col  :span="6">
              <div align="center">
              <el-progress type="circle" :percentage="reportNum.month"></el-progress>
              </div>
              <br>
              <span style="text-align: center;display:block;">月报进度</span>
            </el-col >
            <el-col  :span="6">
              <div align="center">
            <el-progress type="circle" :percentage="reportNum.centre" ></el-progress>
              </div>
            <br>
            <span style="text-align: center;display:block;">中期报告进度</span>
            </el-col >
            <el-col  :span="6">
              <div align="center">
              <el-progress type="circle" :percentage="reportNum.final" ></el-progress>
              </div>
              <br>
              <span style="text-align: center;display:block;">末期报告进度</span>
            </el-col >
          </el-row>
          <el-row>
             <el-divider></el-divider>
            <el-col :span="12" >
              <el-card shadow="always">
                <el-divider>我的指导老师</el-divider>
              <div v-if="myTeach.teachAccount!==undefined">
                  <el-row >
                    <el-col :span="12" :offset="4">
                      <div class="block" align="center">
                        <el-avatar :size="50" :src="myTeach.avatar" @click="toTeacnChat()"></el-avatar>
                        <el-button  type="text" @click="toTeacnChat()">私信</el-button>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-col :offset="4"><span >指导教师姓名：{{myTeach.teachName}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :offset="4"><span > 指导老师手机号码：{{myTeach.teachPhone}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :offset="4"><span >指导老师邮箱：{{myTeach.teachEmail}}</span></el-col>
                  </el-row>
              </div>
              <div v-if="myTeach===undefined||myTeach.teachAccount===undefined">
                你还没有绑定指导老师哦！
              </div>
              </el-card>
            </el-col>
            <el-col :span="12" >
              <!--<div align="center" id="myChart" :style="{width: '400px', height: '300px'}"></div>-->
               <el-card shadow="always">
                 <el-divider>我的实训信息</el-divider>
                 <div v-if="myCompany!==undefined">
                   实训单位名称：{{myCompany.internshipName}}<br>
                   实训单位地址：{{myCompany.internshipAddress}}<br>
                 </div>
                 <div  v-if="myCompany===undefined">
                   你还没有填报实训信息哦！
                 </div>
               </el-card>
            </el-col>
           </el-row>
          
        </div>
    <!--教师首页样式-->
    <div  v-if="this.$store.state.user.userType===1">
      <el-row :gutter="20" class="panel-group">
          <el-col :span="12"  class="card-panel-col">
            <div class="card-panel" @click="handleSetLineChartData('purchases')">
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="reportTotal" :duration="4000" class="card-panel-num text-wrapper" />
                <div class="card-panel-text">
                  待审核报告数
                </div>
              </div>
            </div>
        </el-col>
        <el-col :span="12"  class="card-panel-col">
            <div class="card-panel" @click="handleSetLineChartData('purchases')">
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="studentCompanyTotal" :duration="4000" class="card-panel-num text-wrapper" />
                <div class="card-panel-text">
                  待审核实训信息数
                </div>
              </div>
            </div>
        </el-col>
      </el-row>
      <div>
        <el-divider>我的待办</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>待审核报告</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toVerifyReport()">去审核</el-button>
              </div>
              <div v-for="item in reportList" :key="item" class="text item">
                <el-row :gutter="20">
                  <el-col  :span="6" >
                    <div>
                      <a @click="toVerifyReportDetail(item)">{{item.reportTitle }}</a>
                    </div>
                  </el-col>
                  <el-col :span="6" :offset="10">
                    {{item.studentName}}
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>待审核实训信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toVerifyCompany()">去审核</el-button>
              </div>
              <div v-for="item in studentCompanyList" :key="item" class="text item">
                <el-row :gutter="20">
                    <el-col  :span="6" >
                      <div @click="toVerifyCompany()">
                        <a type="text">{{item.internshipName }}</a>
                      </div>
                    </el-col>
                    <el-col :span="6" :offset="10">
                      <div>
                        {{item.studentName}}
                      </div>
                    </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--管理员首页样式-->
    <div  v-if="this.$store.state.user.userType===0">
       <el-row :gutter="20" class="panel-group">
          <el-col :span="6"  class="card-panel-col">
            <div class="card-panel" @click="handleSetLineChartData('purchases')">
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="allCompanyTotal" :duration="4000" class="card-panel-num text-wrapper" />
                <div class="card-panel-text">
                  系统总实训单位数
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6"  class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('purchases')">
                <div class="card-panel-description">
                  <count-to :start-val="0" :end-val="studentRediaParamsTotal" :duration="4000" class="card-panel-num text-wrapper" />
                  <div class="card-panel-text">
                    累计提交实训信息数
                  </div>
                </div>
              </div>
          </el-col>
          <el-col :span="6"  class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('purchases')">
                <div class="card-panel-description">
                  <count-to :start-val="0" :end-val="allStudentTotal" :duration="4000" class="card-panel-num text-wrapper" />
                  <div class="card-panel-text">
                    总学生数
                  </div>
                </div>
              </div>
          </el-col>
          <el-col :span="6"  class="card-panel-col">
              <div class="card-panel" @click="handleSetLineChartData('purchases')">
                <div class="card-panel-description">
                  <count-to :start-val="0" :end-val="allReportTotal" :duration="4000" class="card-panel-num text-wrapper" />
                  <div class="card-panel-text">
                    累计提交报告数
                  </div>
                </div>
              </div>
          </el-col>
        </el-row>
        <el-divider>我的待办</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>待审核实训单位</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="verifyCompanydetailAll()">去审核</el-button>
              </div>
              <div v-for="item in allVerifyCompanyList" :key="item" class="text item">
                <el-row :gutter="24">
                  <el-col  :span="10" >
                    <div>
                      <a @click="verifyCompanydetail(item)">{{item.companyName }}</a>
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="4">
                    {{item.createTime}}
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import CountTo from 'vue-count-to'
import { getReportProgress,getVerifyReport,getReportList } from '@/api/report'
import { getUserList} from '@/api/user'
import {selectBinding} from '@/api/binding'
import { getMyTeach } from '@/api/teach'
import { getResultSetting } from '@/api/setting'
import { getCompanyList,getVerifyCompanyList,getMyCompany } from '@/api/company'
export default {
components: {
    CountTo
  },
  data() {
    return {
      myCompany:[],
      myTeach:{},
      param:{
        studentAccount:''
      },
      reportNum:{
        week:0,
        month:0,
        centre:0,
        final:0
      },
     option:{
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 30, name: '平时成绩比例'},
                {value: 30, name: '中期检查成绩'},
                {value: 30, name: '末期检查成绩'}
            ]
        }
    ]
      },
      ResultSetting:{
          percentageA: 30,
          percentageB: 30,
          percentageC: 40,
        },
        reportList:[],
        reportTotal:'',
        studentCompanyList:[],
        studentCompanyTotal:'',
        taskParams:{
          internshipStatus:0,
          start:0,
          limit:10
        },
        studentRediaParams:{
          internshipStatus:1,
          start:0,
          limit:10
        },
        studentRediaParamsTotal:0,
        allCompanyTotal:0,
        allStudentParams:{
          userType:'2',
          start:0,
          limit:10
        },
        allStudentTotal:0,
        allReportParams:{
          start:0,
          limit:10,
          reportStatus:1
        },
        allReportTotal:0,
        allVerifyCompanyList:[],
        allVerifyCompanyTotal:0,
    }
  },
    //页面打开时执行的方法
  created() {
    if(this.$store.state.user.userType===2){//学生用户进入界面时执行
     this.getReportProgress()
     this.getMyTeach()
     this.getResultSetting()
     this.getMyCompany()
    }else if(this.$store.state.user.userType===1){//教师用户登录进页面时执行
    this.getVerifyReport();
    this.selectBinding();
    }else if(this.$store.state.user.userType===0){//管理员登录界面时执行
    this.getReportList()
    this.getUserList()
    this.getCompanyList()
    this.getStudentCompanyTotal()
    this.getVerifyCompanyList()
    }
  },
  mounted(){
    this.initChart();
    
  },
   methods: {
     toTeacnChat(){
       this.$router.push({
        path: "/notify/chat",
        query:{
          userAccount:this.myTeach.teachAccount
        }
        })
     },
     async getMyCompany(){
        let res = await getMyCompany();
         this.myCompany = res.bean||''
      },
     async getVerifyCompanyList() {
      let res = await getVerifyCompanyList(this.allStudentParams)
      this.allVerifyCompanyList = res.beans
      this.allVerifyCompanyTotal = res.bean.total
    },
    verifyCompanydetailAll(){
      this.$router.push("/verifyCompany")
    },
    //进入实训单位详情
    verifyCompanydetail(item){
      this.$router.push({
        path: "/verifyCompanyDetail",
        query:{
          companyId:item.internshipId
        }
        })
    },
     async getReportList() {
      let res = await getReportList(this.allReportParams)
      this.allReportTotal = res.bean.total
    },
     async getUserList() {
      let res = await getUserList(this.allStudentParams)
      this.allStudentTotal = res.bean.total
    },
     async getCompanyList() {
      let res = await getCompanyList(this.taskParams)
      this.allCompanyTotal = res.bean.total
    },
    async getStudentCompanyTotal(){
      let res = await selectBinding(this.studentRediaParams)
      this.studentRediaParamsTotal = res.bean.total   
    },
     async getVerifyReport() {
      let res = await getVerifyReport(this.taskParams)
      this.reportList = res.beans
      this.reportTotal = res.bean.total
    },
    async selectBinding() {
      let res = await selectBinding(this.taskParams)
      this.studentCompanyList = res.beans
      this.studentCompanyTotal = res.bean.total
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.chart.setOption(this.option);
    },
    async getReportProgress() {
      this.param.studentAccount = this.$store.state.user.userAccount;
      let res = await getReportProgress(this.param)
      this.reportNum = res.bean
    },
    async getMyTeach() {
      let res = await getMyTeach()
      this.myTeach = res.bean
    },
    async getResultSetting() {
      let res = await getResultSetting()
      this.ResultSetting.percentageA = res.bean.peacetimeResult
      this.ResultSetting.percentageB = res.bean.centreResult
      this.ResultSetting.percentageC = res.bean.finalResult
      this.option.series[0].data[0].value = this.ResultSetting.percentageA
      this.option.series[0].data[1].value = this.ResultSetting.percentageB
      this.option.series[0].data[2].value = this.ResultSetting.percentageC
      this.initChart();
    },
    toVerifyCompany(){
      this.$router.push("/verifyStudentCompany")
    },
    toVerifyReport(){
      this.$router.push("/verifyReport")
    },
    toVerifyReportDetail(item){
      this.$router.push({
        path: "/verifyReportDetail",
        query:{
          reportId:item.reportId,
          studentAccount:item.studentAccount
        }
        })
    }
   }
}
</script>
<style lang="scss">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 208px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .text-wrapper {
        color: #36a3f7;
      }
    }

    .card-panel-description {
      text-align: center;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 88px;
      }
    }
  }
}
</style>